
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map数据结构</title>
</head>
<body>


    <ul name="我是ul" id="1" age="20">
        <li name="java">学习java</li>
        <li name="web">学习web</li>
        <li name="ui">学习ui</li>
    </ul>
    <!-- 
        ES6 提供了 Map 数据结构。它类似于对象，也是双列键值对的集合，
        但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键
        注意事项：
            不能使用for in 循环 可以使用for of

        属性和方法：
            - size**  获取Map的长度 此处注意size是属性不是方法
            - **set(key,val)**  添加一条数据
            - **get(key)**  根据key获取val
            - **has(key)**  是否存在key
            - **delete(key)** 删除某条数据
            - **clear()** 清空所有数据

        快速遍历map数据的方法
            - map.keys() 返回Map对象的所有键
            - map.values() 返回Map对象的所有值
            - map.entries()返回Map对象的所有键值对
            - map.forEach() map是迭代对象，可以直接遍历

        应用场景：
            1.创建对象
            2.辅助我们友好的操作dom元素 隔离dom

     -->
    <script>

        // let arr  = [['id', 11], ['name', '李四'], [100, '我是数字key'], [true, '我是bool的key']]

        // let m1 = new Map(arr)

        // console.log(m1);
        // console.log(m1.size);
        
        let m = new Map()
        m.set("id",1000)
        m.set(true,"我是bool类的key")
        m.set({},"我是object类的key")
        let u1 = document.querySelector("ul")
        m.set(u1,"我是dom节点对象的key")

        console.log(m);
        
         // 2.属性和方法
         // get(key)  根据key获取val
        console.log(m.get(u1))

        // has(key) 是否存在key
        console.log(m.has('id'))//true

        // delete(key) 删除某条数据
        // console.log(m.delete('id'))//true

        // clear() 清空所有数据
        // m.clear()
        // console.log(m);

        // for (let key in m) {
        //     console.log(key)
        // }

        // m2.entries()
        // for (let key of m) {
        //     console.log(key)
        // }


        // 3.使用map方法快速遍历对象数据
        // - map.keys() 返回Map对象的所有键
        // console.log([...m.keys()])

        // - map.values() 返回Map对象的所有值
        // console.log([...m.values()])

        // - map.entries()返回Map对象的所有键值对
        // console.log(m.entries())

        // - map.forEach() map是迭代对象，可以直接遍历
        // m.forEach((item, index) => {
        //     console.log(index, item)
        // })


        // 4.map应用场景：
        // 将dom元素对象传参到Map对象  重排(回流)  重绘
        // 将获取到的ul标签对象作为key 以ul上的属性值作为key对应的value 进行存储 空间换时间


    </script>
</body>
</html>